<template>
  <div class="p-5">
    <p>dialog</p>
    <el-button type="primary" @click="handleAdd(1)">改变topValue1</el-button>

    <el-button type="primary" @click="handleAdd(2)">改变topValue2</el-button>

    <el-button type="primary" @click="handleChangeDisable(1)">改变disabledNode1</el-button>

    <el-button type="primary" @click="handleChangeDisable(2)">改变disabledNode2</el-button>

    <p>Panel</p>
    <select-access-bank v-model="bankIds" @change="handleBankChange"></select-access-bank>

    <p>选中值</p>
    <p>{{ bankIds.toString() }}</p>
    <p>{{ bankNodes.map(node => node.data.agency_name).toString() }}</p>

    <select-access-bank-dialog
      :visible.sync="visible"
      :disabled-node="disabledNode"
      :top-value="topValue"
      v-model="bankIds"
      @change="handleBankChange"
    ></select-access-bank-dialog>
  </div>
</template>

<script>
import SelectAccessBank from '@/credit/components/select/SelectAccessBank'
import SelectAccessBankDialog from '@/credit/components/select/SelectAccessBankDialog'

export default {
  components: {
    SelectAccessBank,
    SelectAccessBankDialog,
  },
  props: {},
  data() {
    return {
      bankIds: [],
      bankNodes: [],
      visible: false,
      disabledNode: [],
      topValue: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.setIds()
  },
  mounted() {},
  methods: {
    setIds() {
      setTimeout(() => {
        this.bankIds = [
          '7f37d6f3-54d4-40c9-8f56-205fc680ae54',
          '4fa34448-508d-4be4-b5e2-c6c0a2f2eb05',
        ]
      }, 1000)
    },
    handleBankChange(val, nodes) {
      this.bankNodes = nodes
    },
    handleAdd(type) {
      this.visible = true
      this.topValue =
        type === 1 ? '036e3446-e1a0-4c5c-a52d-a7a01e782294' : 'bd0aacdd-f814-4110-987f-78ea5c44d555'
    },
    handleChangeDisable(type) {
      this.visible = true
      this.bankIds = []
      this.topValue = ''
      this.disabledNode =
        type === 1
          ? ['ccbfc963-94bf-11ea-9264-0242ac150004', '0e64b21c-68c2-4eee-bfef-4e3af38de0fd']
          : ['036e3446-e1a0-4c5c-a52d-a7a01e782294', '23b2fce1-95c8-406c-b30e-ecb3c2c16a9c']
    },
  },
}
</script>

<style lang="scss" scoped></style>
